<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>基本列表4</title>
</head>
<script type="text/javascript" src="../vue.js"></script>


<body>

<div id="root">
  <h2>人员列表</h2>
  <input type="text" placeholder="请输入名字" v-model="keyWord">
  <button @click="sortType = 2">年龄升序</button>
  <button @click="sortType = 1">年龄降序</button>
  <button @click="sortType = 0">原顺序</button>
  <ul>姓名-年龄
    <li v-for="(person,index) of filPersons" :key="person.id">{{person.name}}-{{person.age}}--{{person.sex}}</li>
  </ul>
</div>


</body>

<script type="text/javascript">

  Vue.config.productionTip = false

  //用computed实现
  new Vue({
    el:'#root',
    data:{
      keyWord: '',
      sortType: 0, // 0 代表原顺序，1降序，2生序
      persons:[
        {id:'001',name:'马冬梅',age:18,sex:'女'},
        {id:'002',name:'周冬雨',age:14,sex:'女'},
        {id:'003',name:'周杰伦',age:13,sex:'男'},
        {id:'004',name:'温兆伦',age:15,sex:'男'},
      ],
    },
    computed:{
      filPersons(){

        const arr =  this.persons.filter((person)=>{
          return  person.name.indexOf(this.keyWord) !== -1
        })
        //判断是否需要排序
        if(this.sortType){
          arr.sort((p1,p2)=>{
            return this.sortType === 1 ?  p1.age - p2.age : p2.age - p1.age ;
          })
        }
        return arr
      }
    }
  })
</script>
</html>